<!--  -->
<template>

  <div>
    <h3>当前的数字为:{{num}}</h3>
    <h3>当前的数字为乘以10结果为---{{bigNum}}</h3>
    <h3>{{name}}是{{schoolName}}的学生</h3>
    <select name=""
            id=""
            v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="addOdd(n)">当为奇数时才加</button>
    <button @click="addWait(n)">异步操作加法</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {
      // 默认的多项框的选中值
      n: 1
    }
  },
  methods: {
    increment (n) {
      this.$store.commit('JIA', n)
    },
    decrement (n) {
      this.$store.commit('JIAN', n)
    },
    addOdd (n) {
      this.$store.dispatch('addOdd', n)
    },
    addWait (n) {
      this.$store.dispatch('addWait', n)
    }
  },
  computed: {
    // -----------------mapState-------------------
    // 1.第一种自己写:
    // num () {
    //   return this.$store.state.num
    // },
    // name () {
    //   return this.$store.state.name
    // },
    // schoolName () {
    //   return this.$store.state.schoolName
    // }
    // 2.借助助手函数:对象写法
    // ...mapState({ 'num': 'num', 'name': 'name', 'schoolName': 'schoolName' })
    // 3.借助助手函数:数组写法
    ...mapState(['num', 'name', 'schoolName']),

    // ----------------------mapGetters------------------------
    ...mapGetters({ 'bigNum': 'bigNum' })
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    const x = mapState({ 'name': "name", 'num': 'num', 'schoolName': 'schoolName' })
    console.log(x);
  }
}
</script>
<style scoped>
</style>